<script lang="ts" setup>
import type { ButtonOnChooseavatar } from '@uni-helper/uni-app-types'
import { useUserStore } from '@/common/store'
import { HttpStatusCodes } from '@/common/enum/http-status-codes'
import { updateUserInfoByIdService } from '@/common/service/users'
import { openTXMapChooseLocation } from '@/common/utils/open-tx-map'
import { IconPath, PagePath, PageTitle } from '@/common/constants'

const chooseLocation = requirePlugin('chooseLocation')

const popupRef = ref()

const { hope_user_info, setUserInfo } = useUserStore()
/**
 * 表单数据
 */
const formData = ref({
  avatarUrl: hope_user_info?.avatarUrl,
  nickname: hope_user_info?.nickname,
  phoneNumber: hope_user_info?.phoneNumber,
  address: hope_user_info?.address,
})

/**
 * 打开弹框
 */
const openPopup = () => {
  popupRef.value.open('bottom')

  formData.value = {
    avatarUrl: hope_user_info?.avatarUrl,
    nickname: hope_user_info?.nickname,
    phoneNumber: hope_user_info?.phoneNumber,
    address: hope_user_info?.address,
  }
}

/**
 * 关闭popup
 */
const closePopup = () => {
  popupRef.value.close()
}

const settingsItems = ref([
  { label: '头像', image: formData.value.avatarUrl },
  { label: '昵称', value: formData.value.nickname },
  { label: '手机号码', value: formData.value.phoneNumber },
  { label: '地址', value: formData.value.address },
])

const { uploadFile } = useUploadFile()

/**
 * 选择头像
 */

const onChooseAvatar: ButtonOnChooseavatar = (e) => {
  uni.downloadFile({
    url: e.detail.avatarUrl,
    success: async (res) => {
      if (res.statusCode === HttpStatusCodes.OK) {
        const tempFilePath = res.tempFilePath
        // 上传用户头像
        const url = await uploadFile(tempFilePath)

        formData.value.avatarUrl = url
      }
    },
  })
}

/**
 * 提交表单
 */
const onSubmit = async () => {
  updateUserInfoByIdService(formData.value).then(() => {
    setUserInfo(formData.value)
    popupRef.value.close()
    uni.reLaunch({
      url: PagePath.MY,
    })
  })
}

onShow(() => {
  formData.value.address = hope_user_info?.address

  // 获取地图选点插件返回的选点信息
  const location = chooseLocation.getLocation()
  if (!location || location.address === formData.value.address
  ) return

  formData.value.address = location.address
})
</script>

<template>
  <view class="settings-container">
    <!-- 标题 -->
    <hope-nav-bar :title="PageTitle.MY" is-back-icon />
    <view class="settings-scroll-container">
      <scroll-view scroll-y class="settings-scroll-content">
        <view class="settings-list">
          <view v-for="item in settingsItems" :key="item.label" class="settings-item">
            <text class="settings-item-name">
              {{ item.label }}
            </text>
            <template v-if="item.image">
              <image :src="item.image" mode="scaleToFill" class="settings-item-avatar" />
            </template>
            <template v-else>
              <text class="settings-item-text">
                {{ item.value }}
              </text>
            </template>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="button-confirm-button" @click="openPopup">
      <hope-button title="修改" />
    </view>
  </view>

  <!-- TODO:后续进行优化封装 popup -->
  <uni-popup ref="popupRef" type="bottom" background-color="#ffffff">
    <view class="popup-container">
      <form class="form-container">
        <view class="form-item close" @click="closePopup">
          <image class="form-item-icon" :src="IconPath.DELETE" mode="scaleToFill" />
        </view>
        <view class="form-item">
          <text class="form-item-label">
            头像
          </text>
          <view class="form-item-avatar">
            <button class="form-item-avatar-text" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              点击上传头像
            </button>
            <image :src="formData.avatarUrl" mode="aspectFit" class="form-item-avatar-img" />
          </view>
        </view>
        <view class="form-item">
          <text class="form-item-label">
            昵称:
          </text>
          <input v-model="formData.nickname" class="form-item-input" type="text" placeholder="请输入您的昵称">
        </view>
        <view class="form-item">
          <text class="form-item-label">
            手机号码:
          </text>
          <input
            v-model="formData.phoneNumber" :maxlength="11" class="form-item-input" type="text"
            placeholder="请输入您的手机号码"
          >
        </view>
        <view class="form-item">
          <text class="form-item-label">
            地址:
          </text>
          <input v-model="formData.address" class="form-item-input" type="text" placeholder="请输入您的地址">
          <image
            class="form-item-icon" :src="IconPath.POSITION" mode="scaleToFill"
            @click="() => openTXMapChooseLocation()"
          />
        </view>
      </form>
      <view @click="onSubmit">
        <hope-button title="修改" />
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.settings {
  &-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  &-scroll {
    background-color: $color-white;

    &-container {
      flex: 1;
      overflow: scroll;
      background-color: $color-white;
    }

    &-content {
      height: 100%;
    }
  }

  &-list {
    padding-inline: $padding-base;
    padding-top: 40rpx;
  }

  &-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $border-color;
    padding-block: 42rpx;
    align-items: center;

    &-name {
      width: 300rpx;
      font-size: $font-size-base;
    }

    &-text {
      font-size: $font-size-base;
      color: $uni-text-color-grey;
    }

    &-avatar {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
    }
  }
}

.button-confirm-button {
  background-color: $color-white;
  padding-inline: $padding-base;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

.form {

  &-container {
    display: flex;
    gap: 20rpx;
    flex-direction: column;
    padding-bottom: $padding-base;
  }

  &-item {
    display: flex;
    justify-content: space-between;
    margin-top: $padding-base;
    align-items: center;

    .close {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &-icon {
      width: 40rpx;
      height: 40rpx;
    }

    &-label {
      width: 160rpx;
    }

    &-input {
      flex: 1;
      border-bottom: 1px solid $border-color;
      padding-inline: $padding-base;
      padding-block: 20rpx;
    }

    &-avatar {
      position: relative;
      width: 300rpx;
      height: 300rpx;
      border-radius: 50%;
      overflow: hidden;

      &-text {
        width: 100%;
        height: 100%;
        line-height: 300rpx;
        text-align: center;
        position: absolute;
        color: $color-white;
        background-color: $bg-black-opacity-3;
      }

      &-img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.popup {
  &-container {
    padding: $padding-base;
  }
}

:deep(.uni-easyinput__content-input) {
  padding-inline: 20rpx;
  padding-block: 10rpx;
  font-size: $font-size-base;
}
</style>
